<template>
  <div>
    <ProTable ref="refTable" :columns="columnProps" :indent="20" :request-api="requestGetRoleTreeList" title="用户列表">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="BtnAuthCreate" :icon="CirclePlus" type="success" @click="CreateData">新增数据</el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button v-auth="BtnAuthCreate" :icon="EditPen" link type="primary" @click="AddSubRole(scope.row)">
          新增子角色
        </el-button>
        <el-button v-auth="BtnAuthUpdate" :icon="EditPen" link type="primary" @click="UpdateData(scope.row)"> 编辑 </el-button>
        <el-button :icon="EditPen" link type="primary" @click="PermissionSet(scope.row)"> 权限分配</el-button>
        <el-button v-auth="BtnAuthDelete" :icon="Delete" link type="primary" @click="DeleteData(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>

    <CreateSysRole ref="refCreatePop" @reload="ReloadData"></CreateSysRole>

    <UpdateSysRole ref="refUpdatePop" @reload="ReloadData"></UpdateSysRole>
    <permissionSetting ref="refPermissionSet"></permissionSetting>
  </div>
</template>

<script lang="ts" name="accountManage" setup>
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { requestGetRoleTreeList, requestSysRoleDelete, requestSysRoleSearch } from "@/api/modules/sysRole";
import { Extra } from "@/api/interface/Search/Extra";
import { ReqSearch } from "@/api/interface/Search/ReqSearch";
import { ColumnProps } from "@/components/ProTable/interface";
import CreateSysRole from "./components/create.vue";
import UpdateSysRole from "./components/update.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { dtoSysRoleDelete, dtoSysRoleInfo } from "@/api/dbdto/dtoSysRole";
import { getUpdatedColumnsSysRole } from "./columns/resetList";
import { ElMessage, ElMessageBox } from "element-plus";
import { ResultData } from "@/api/interface";
import { RespOk } from "@/constant/codes";
import permissionSetting from "@/views/system/sysRole/components/permissionSetting.vue";
import { BtnAuthCreate, BtnAuthDelete, BtnAuthUpdate } from "@/constant/enums/btn_permission";
import { dtoSysUserDelete, dtoSysUserInfo } from "@/api/dbdto/dtoSysUser";

const refCreatePop = ref();
const refUpdatePop = ref();
const refPermissionSet = ref();
const refTable = ref();
//onBeforeMount
const columnProps = ref<ColumnProps[]>(getUpdatedColumnsSysRole());

//创建数据
const CreateData = () => {
  refCreatePop.value.ShowPop();
};

//刷新数据
const ReloadData = () => {
  if (refTable.value) {
    refTable.value.getTableList();
  }
};

//新增子角色
const AddSubRole = (row: any) => {
  refCreatePop.value.ShowPop(row);
};

//删除数据
const DeleteData = (data: dtoSysUserInfo | number[]) => {
  let ids = Array.isArray(data) ? data : [data["id"]];
  ElMessageBox.confirm("删除后不可恢复，是否确定?", "删除确认，共" + ids.length + "条数据", {
    confirmButtonText: "确定",
    cancelButtonText: "再想想",
    type: "warning"
  }).then(() => {
    let params: dtoSysUserDelete = {
      id: ids
    };
    requestSysRoleDelete(params).then((res: ResultData<any>) => {
      if (res.code == RespOk) {
        ElMessage({ type: "success", message: "删除完成" });
        refTable.value.getTableList();
      }
    });
  });
};
const UpdateData = (row: dtoSysRoleInfo) => {
  refUpdatePop.value.ShowPop(row);
};
const PermissionSet = (row: dtoSysRoleInfo) => {
  refPermissionSet.value.ShowPop(row);
};

const SearchAccountList = (params: any) => {
  let extra: Extra = {
    pageNum: params.pageNum,
    pageSize: params.pageSize
  };
  let req: ReqSearch = {
    extra: extra,
    wheres: [
      // {field: "id", opt: "=", value: 2} as Field,
    ]
  };
  return requestSysRoleSearch(req);
};
</script>
